<template>
  <div id='map'></div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import 'echarts-gl'
  import { reactive, onMounted, markRaw } from "vue";
  import testJson from "./100000.json";
  import bigImg from "../assets/image/6.jpg"
  let data: any = reactive({
    threeMap:null,
    chinaGeoCoordMap:{},
    chinaDatas:[
      [{name: '北京市', value: 0}],
      [{name: '陕西省', value: 0}],
      [{name: '上海市', value: 0}],
      [{name: '广东省', value: 0}],
    ]
  });
  let methods = {

    init(){
      for (let i=0;i<testJson.features.length;i++){
        let name = testJson.features[i].properties.name;
        if(name){
          data.chinaGeoCoordMap[name] = testJson.features[i].properties.center;
        }
      }
      methods.drawMap('china',60,0,testJson)
    },

    drawMap(darwMapType,alpha,beta,allData){
      let convertData1 = function(data1){
        var res = [];
        for(var i = 0; i < data1.length; i++) {
          var dataItem = data1[i];
          var fromCoord = data.chinaGeoCoordMap[dataItem[0].name];
          var toCoord = [102.712251,25.040609];
          if(fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value
            }, {
              coord: toCoord,
            }]);
          }
        }
        return res;
      };

      //arr 第一个数据是地图边界渲染  第二数据是已有数据颜色渲染
      let arr = [
        {
          type: 'lines',
          zlevel: 2,
          effect: {
            show: false,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            type:'double',
            width: 2, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: -0.4, //尾迹线条曲直度
            color:'#EDC14D',
          },
          data: convertData1(data.chinaDatas)
        },
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          symbol:'roundRect',
          symbolSize:0,
          label: {
            show: true,
            position:[32,-2], //显示位置
            formatter: function(params){//圆环显示文字
              return params.data.name;
            },
            fontSize: 16,
            color:'#ffffff',
            backgroundColor:new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 137, 0, 1)',
                offset: 0
              },
              {
                color: 'rgba(255, 174, 0, 0.7)',
                offset: 1
              }
            ]),
            borderRadius: 3,
            width:60,
            height:30,
            lineHeight:30,
            align:'center',
            shadowColor:'rgba(0, 24, 61, 0.8)',
            shadowBlur:8,
            shadowOffsetX:0,
            shadowOffsetY:0,
          },
          data: data.chinaDatas.map(function(dataItem) {
            return {
              name: dataItem[0].name,
              value: data.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
            };
          }),
        },
        //中心点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          label: {
            show: true,
            position:'bottom', //显示位置
            formatter: function(params){//圆环显示文字
              return params.data.name;
            },
            fontSize: 16,
            color:'#ffffff',
            backgroundColor:new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 137, 0, 1)',
                offset: 0
              },
              {
                color: 'rgba(255, 174, 0, 0.7)',
                offset: 1
              }
            ]),
            borderRadius: 3,
            width:60,
            height:30,
            lineHeight:30,
            align:'center',
            shadowColor:'rgba(0, 24, 61, 0.8)',
            shadowBlur:8,
            shadowOffsetX:0,
            shadowOffsetY:0,
          },
          symbol: 'circle',
          symbolSize: 16,
          itemStyle: {
            show: false,
            color: '#EDC14D',
            opacity:1,
          },
          data: [{
            name: '云南省',
            value: data.chinaGeoCoordMap['云南省'].concat([10]),
          }],
        },
        //背景
        {
          type: 'map',
          name: 'china',
          map: 'china',
          aspectScale: 0.85,
          zoom: 1.2,
          top: '10%',
          left: 'center',
          roam: false,
          z: 6,
          itemStyle: {
            areaColor:{
              type:'pattern',
              image:bigImg,
              repeat: "no-repeat",
            },
            borderColor: '#d8d8d8',
            borderWidth: 1,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 0,
          },
        },
      ];
      let options =  {
        //geo3D数据是协助市级的时候标点用的
        geo:[
          {
            map: 'china',
            aspectScale: 0.85,
            zoom: 1.2,
            top: '10.5%',//根据自己需要来设置
            left: 'center',
            roam: false,
            z: 5,//变小，也就是被压在下面
            itemStyle: {
              areaColor: '#1FA8F2',
              borderColor: '#1FA8F2',
              borderWidth: 2,
              shadowColor: '#1FA8F2',
              shadowOffsetX: 0,
              shadowOffsetY: 4,
              shadowBlur: 15,
            },
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  opacity: 0 // 为 0 时不绘制该图形
                },
                label: {
                  show: false
                }
              }
            ],
          },
          {
            map: 'china',
            aspectScale: 0.85,
            zoom: 1.2,
            top: '11%',//根据自己需要来设置
            left: 'center',
            roam: false,
            z: 4,//变小，也就是被压在下面
            itemStyle: {
              areaColor: '#2090d3',
              borderColor: '#2090d3',
              borderWidth: 2,
              shadowColor: '#2085c4',
              shadowOffsetX: 0,
              shadowOffsetY: 4,
              shadowBlur: 15,
            },
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  opacity: 0 // 为 0 时不绘制该图形
                },
                label: {
                  show: false
                }
              }
            ],
          },
          {
            map: 'china',
            aspectScale: 0.85,
            zoom: 1.2,
            top: '11.5%',//根据自己需要来设置
            left: 'center',
            roam: false,
            z: 4,//变小，也就是被压在下面
            itemStyle: {
              areaColor: '#2085c4',
              borderColor: '#2085c4',
              borderWidth: 2,
              shadowColor: '#1a77af',
              shadowOffsetX: 0,
              shadowOffsetY: 4,
              shadowBlur: 15,
            },
            regions: [
              { // 隐藏南海诸岛,因为顶层已经添加过了
                name: '南海诸岛',
                itemStyle: {
                  opacity: 0 // 为 0 时不绘制该图形
                },
                label: {
                  show: false
                }
              }
            ],
          },
        ],
        series:arr
      };
      data.threeMap = markRaw(echarts.init(document.getElementById('map')));
      echarts.registerMap(darwMapType, allData);
      data.threeMap.clear();
      data.threeMap.setOption(options);
    }
  };
  onMounted(()=>{
    methods.init()
  });
</script>

<style scoped>
#map{
  width: 100%;
  height: 100%;
  background: #252525;
  box-shadow: 0 3px 12px rgba(98,107,181,.25);
}
</style>
